<template>
  <div class="GdXceoAppBreadcrumb-container">
    <span v-for="(item, index) in orgList" :key="item">
      <span class="text" :class="{ 'text-link': index < orgList.length - 1 }" @click="handleClickOrg(item, index)">
        {{ orgNameMap[item] }}
      </span>
      <span class="arrow">{{ index < orgList.length - 1 ? ' > ' : '' }}</span>
    </span>
  </div>
</template>

<script>
import { getAction } from '@/api/manage'
export default {
  name: 'GdXceoAppBreadcrumb',
  props: {
    orgCode: {
      type: [String, Number],
      default: '',
    },
  },

  watch: {
    orgCode: {
      immediate: true,
      handler(nv) {
        nv && this.getDepartName()
      },
    },
  },

  data() {
    return {
      orgNameMap: {},
      orgList: [],
    }
  },

  methods: {
    async getDepartName() {
      if (this.orgNameMap[this.orgCode]) return
      this.orgList.push(this.orgCode)
      const { result } = await getAction('/sys/sysDepart/getDepartName', { orgCode: this.orgCode })
      this.orgNameMap = {
        ...this.orgNameMap,
        [this.orgCode]: result.departName,
      }
    },
    handleClickOrg(orgCode, index) {
      if (index === this.orgList.length - 1) return
      this.orgList.splice(this.orgList.indexOf(orgCode) + 1, 10)
      this.$emit('breadcrumbCallBack', { orgCode, index })
    },
  },
}
</script>

<style lang="less" scoped>
@import '~@assets/less/reconsitution/common.less';
.GdXceoAppBreadcrumb-container {
  color: #1890ff;
  .text-link {
    text-decoration: underline;
  }
  .arrow {
    padding: 0 8px;
    color: rgba(0, 0, 0, 0.45);
  }
}
</style>